<template>
	<div class="ns-groupbuy">
		<el-carousel height="400px" v-loading="loadingAd">
			<el-carousel-item v-for="item in adList" :key="item.adv_id"><el-image :src="$img(item.adv_image)" fit="cover" @click="$router.pushToTab(item.adv_url.url)" /></el-carousel-item>
		</el-carousel>
		<!-- 商品列表 -->
		<div class="ns-groupbuy-box" v-loading="loading">
			<div class="ns-groupbuy-title" v-if="cargoList.length" style="display:none;">
				<i class="iconfont icontuangou"></i>
				<span>企业认购</span>
			</div>

			<el-card class="box-card member-coupon">


				<div class="cargo-list" v-if="cargoList.length">
					<div class="goods-info">
						<div
						class="item"
						v-for="(item, index) in cargoList"
						:key="item.goods_id"
						@click="$router.pushToTab({ path: '/promotion/enterprisebuydetail/sku-' + item.sku_id })"
						>
						<img
							class="img-wrap"
							:src="$img(item.sku_image.split(',')[0], { size: $goodsImgType('mid',item.source) })"
							@error="imageError(index)"
						/>
						<div class="price-wrap">
							<div class="price">
							<p>￥</p>
							{{ item.corporate_subscription_price }}
							</div>
							<div class="market-price">￥{{ item.discount_price }}</div>
						</div>
						<div class="goods-name">{{ item.goods_name }}</div>
            	<!-- <div class="sale-num" v-for="(items,indexs) in item.corporate_subscription_price_arr" :key="indexs">
                
							<p>{{ items.level_name }}购买价格为<span class="color-money">￥{{ items.corporate_subscription_goods_price }}</span></p>
						  </div> -->
						<div class="sale-num">
							<p>{{ item.sale_num || 0 }}</p>人付款
						</div>
						<div class="shop_name">{{item.site_name}}</div>
            <div class="saling">
                <!--三种样式，以后有需求，方便修改-->
                <!-- <div class="free-shipping" v-if="item.is_free_shipping == 1">包邮</div> -->
                <div class="is_own" v-if="item.discount_state == 1">企业集采</div>
                <!-- <div class="promotion-type" v-if="item.promotion_type == 1">限时折扣</div> -->
            </div>
						</div>
					</div>
		  			<div class="pager">
							<el-pagination
								background 
								:pager-count="5" 
								:total="total" 
								prev-text="上一页" 
								next-text="下一页" 
								:current-page.sync="currentPage" 
								:page-size.sync="pageSize" 
								@size-change="handlePageSizeChange" 
								@current-change="handleCurrentPageChange" 
								hide-on-single-page
							></el-pagination>
						</div>
        		</div>
        	</el-card>
		</div>
		
	</div>
</template>

<script>
import { goodsPage } from '@/api/groupbuy';
import { mapGetters } from 'vuex';
import { adList } from '@/api/website';
import { biddingpage } from "@/api/member/competitive"

import { pintuanlist } from "@/api/pintuan"
//导入企业认购列表
import { enterprisebuylist } from "@/api/enterprise"

export default {
	name: 'enterprisebuylist',
	components: {},
	data: () => {
		return {
			cargoList: [],
			loading: true,
			goodsList: [],
			total: 0,
			currentPage: 1,
			pageSize: 10,
			loadingAd: true,
            adList: [],
            orderList: [],
            total: 0,
            loading: true,
            yes: true,
            num: 0,
			Math: "",
			pintuanList: [],
			countDownNum:0,

			day:0,
			hr:0,
			min:0,
			sec:0,
		};
    },
    mounted: function () {
        let self = this
        setTimeout(function () {
            self.yes = false
        }, 300)
    },
	created() {

		if (this.addonIsExit && this.addonIsExit.groupbuy != 1) {
			this.$message({
				message: '团购插件未安装',
				type: 'warning',
				duration: 2000,
				onClose: () => {
					this.$route.push('/');
				}
			});
		} else {
			this.getAdList();
		}
		this.getEnterprisebuylist();
	},
	computed: {
		...mapGetters(['defaultGoodsImage', 'addonIsExit'])
	},
	watch: {
		addonIsExit() {
			if (this.addonIsExit.groupbuy != 1) {
				this.$message({
					message: '团购插件未安装',
					type: 'warning',
					duration: 2000,
					onClose: () => {
						this.$route.push('/');
					}
				});
			}
		}
	},
	methods: {
		getEnterprisebuylist() {
			enterprisebuylist({
				page: this.currentPage,
				page_size: this.pageSize
			})
				.then(res=>{
					console.log(res)
					if(res.code ==0) {
						this.cargoList = res.data.list
						this.loading = false;
					}
				})
				.catch(err=>{
					console.log(err)
					this.loading = false;
				})
		},
		handlePageSizeChange(size) {
            this.pageSize = size
            this.getEnterprisebuylist()
        },
        handleCurrentPageChange(page) {
            this.currentPage = page
            this.getEnterprisebuylist()
        },
        getTime() {
            
        },
        button(id){
			console.log('/promotion/pintuandetial/sku-' + id)
            this.$router.push({ path: "/promotion/pintuandetail/sku-" + id })
        },
		getAdList() {
			adList({ keyword: 'NS_PC_COROPRATE_SUBSCRIPTION' })
				.then(res => {
					this.adList = res.data.adv_list;
					for (let i = 0; i < this.adList.length; i++) {
						if (this.adList[i].adv_url) this.adList[i].adv_url = JSON.parse(this.adList[i].adv_url);
					}
					this.loadingAd = false;
				})
				.catch(err => {
					this.loadingAd = false;
				});
		},
		/**
		 * 图片加载失败
		 */
		imageError(index) {
			this.goodsList[index].sku_image = this.defaultGoodsImage;
		}
	}
};
</script>
<style lang="scss" scoped>

.box {
    width: 100%;
    position: relative;
}
.null-page {
    width: 100%;
    height: 730px;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}
.detail_list {
	float: left;
    width: 260px;
    height: 385px;
    border: 1px solid #eeeeee;
    margin: 15px;
    display: inline-block;
    justify-content: center;
    position: relative;
    img {
        width: 257px;
        height: 241px;
        margin: 16px 0 0 15px;
    }
    .timeShow {
        padding: 10px;
        background: #ffe5e5;
        border: 0px solid #2b2f30;
        position: absolute;
        top:209px;
        right: -12px;
        text-align: center;
        color: red;
        font-size: 16px;
	}
	
	p{
		.ori_price {
			left: 0;
			position: absolute;
			bottom:30px;
		}
	}
    span {
        display: inline-block;
        width: 253px;
        height: 35px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 21px;
        margin: 18px 0 0 15px;
    }
    p {
        font-size: 20px;
        font-family: Roboto;
        font-weight: 500;
        color: #ff5f8a;
        display: inline-block;

        margin: 20px 0 0 14px;
    }
    button {
        width: 75px;
        line-height: 0px;
        color: #ffffff;
        height: 28px;
        background: #ff5f8a;
        border: 0px solid #2b2f30;
        border-radius: 3px;
        position: absolute;
        right: 14px;
        margin-top: 6px;
    }
}

.goods-info {
  margin-top: 5px;
  width: 1200px;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 220px;
    margin: 10px 15px 0 0;
    border: 1px solid #eeeeee;
    padding-top: 10px;
    position: relative;
    padding-bottom: 5px;
    &:nth-child(5n) {
      margin-right: initial !important;
    }
    &:hover {
      border: 1px solid $base-color;
    }
    .img-wrap {
      width: 198px;
      height: 198px;
      cursor: pointer;
      padding: 10px;
    }
    .goods-name {
      padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      word-break: break-all;
      height: 50px;
      cursor: pointer;
      &:hover {
        color: $base-color;
      }
    }
    .price-wrap {
      padding: 0 10px;
      display: flex;
      align-items: center;
      .price {
        display: flex;
        color: $base-color;
        font-size: $ns-font-size-lg;
        p {
          font-size: $ns-font-size-base;
          display: flex;
          align-items: flex-end;
        }
      }
      .market-price {
        color: #838383;
        text-decoration: line-through;
        margin-left: 10px;
      }
    }
    .sale-num {
      padding: 0 10px;
      display: flex;
      color: #838383;
       font-size: $ns-font-size-sm;
      p {
        .color-money {
          color: #ff547b;
        }
      }
    }
    .shop_name {
      padding: 0 10px;
      display: flex;
      color: #838383;
    }
    .saling {
      padding: 0 10px;
      display: flex;
      font-size: $ns-font-size-sm;
      line-height: 1;
      .free-shipping {
        background: $base-color;
        color: #ffffff;
        padding: 3px 4px;
        border-radius: 2px;
        margin-right: 5px;
      }
      .is_own {
        color: #ffffff;
        background: #ff850f;
        border: 1px solid;
        margin-right: 5px;
        display: flex;
        align-items: center;
        padding: 3px 4px;
        border-radius: 2px;
      }
      .promotion-type {
        color: $base-color;
        border: 1px solid $base-color;
        display: flex;
        align-items: center;
        padding: 1px 3px;
      }
    }
    .item-bottom {
      display: flex;
      margin-top: 5px;
      .collection {
        flex: 1;
        border: 1px solid #e9e9e9;
        border-right: none;
        border-left: none;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .cart {
        flex: 2;
        border: 1px solid #e9e9e9;
        border-right: none;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }
  }
}

.detail_list {
    width: 260px;
    height: 385px;
    border: 1px solid #eeeeee;
    margin: 15px;
    display: inline-block;
    justify-content: center;
    position: relative;
    img {
        width: 257px;
        height: 241px;
        margin: 16px 0 0 15px;
    }
    .timeShow {
        padding: 10px;
        background: #ffe5e5;
        border: 0px solid #2b2f30;
        position: absolute;
        top:209px;
        right: -12px;
        text-align: center;
        color: red;
        font-size: 16px;
    }
    span {
        display: inline-block;
        width: 253px;
        height: 35px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 21px;
        margin: 18px 0 0 15px;
    }
    p {
        font-size: 20px;
        font-family: Roboto;
        font-weight: 500;
        color: #ff5f8a;
        display: inline-block;

        margin: 20px 0 0 14px;
    }
    button {
        width: 75px;
        line-height: 0px;
        color: #ffffff;
        height: 28px;
        background: #ff5f8a;
        border: 0px solid #2b2f30;
        border-radius: 3px;
        position: absolute;
        right: 14px;
        margin-top: 6px;
    }
}
.pager{
    margin-top: 20px;
}
.ns-groupbuy {
	background: #ffffff;
	.ns-groupbuy-box {
		padding-top: 54px;
		width: $width;
		margin: 0 auto;

		.ns-groupbuy-title {
			width: 100%;
			border-bottom: 1px solid $base-color;
			padding-bottom: 10px;

			i {
				font-size: 32px;
				color: $base-color;
			}

			span {
				font-size: 30px;
				font-family: 'BDZongYi-A001';
				font-weight: 600;
				color: $base-color;
				margin-left: 15px;
			}
		}
	}
	.goods-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 45px;

		.item {
			width: 20%;
			padding: 0 6px;
			box-sizing: border-box;
			margin-bottom: 16px;

			.goods {
				width: 100%;
				border: 1px solid #e9e9e9;
				background-color: #ffffff;
				overflow: hidden;
				color: #303133;
				transition: 0.3s;
				padding: 10px;
				box-sizing: border-box;
				cursor: pointer;
			}
		}

		.img {
			width: 100%;
			height: 100%;

			.el-image {
				width: 100%;
				height: 208px;
				.el-image__error {
					width: 100%;
					height: 100%;
				}
			}
		}

		.price {
			p {
				display: flex;
				align-items: flex-end;
				height: 24px;
				color: $base-color;
				margin: 10px 0 5px;

				span:first-child {
					font-size: 20px;
					font-family: 'BDZongYi-A001';
					font-weight: 600;
					margin-right: 5px;
					line-height: 24px;
				}
				span:nth-child(2) {
					line-height: 14px;
				}
			}

			.main_price {
				color: $base-color;
				font-size: 25px;
				line-height: 24px;
				font-weight: 500;
			}

			.primary_price {
				text-decoration: line-through;
				color: $base-color-info;
				margin-left: 5px;
			}
		}

		.name {
			font-size: 14px;
			line-height: 1.4;
			margin-bottom: 5px;
			white-space: normal;
			overflow: hidden;
			
			p {
				line-height: 24px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				height: 50px;
			}
		}
	}
}
</style>
<style lang="scss">
.ns-groupbuy {
	.el-carousel {
		.el-image__inner {
			width: auto;
		}
	}
	.el-carousel__arrow--right{
		right: 60px;
	}
}
</style>
